<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="/iuie-tag"%>
<%@ taglib prefix="sys" uri="/sys-tag" %>
<%@ taglib prefix="lui" tagdir="/WEB-INF/tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>消费报表</title>
</head>
<lui:context/>
<u:View basePath="/res-datum/expense" userJS="expenseReport" delayLoadJs="false" res="highcharts">
<body>
<lui:boards>
    <lui:board width="100%" boardTitle="消费报表">
        <form id="expenseReportFrm" class='m-cust'>
        	<sys:dropCodeSet codeTypes="statisticsSize,statisticsRange01,statisticsRange02,statisticsRange03,statisticsMode" 
        		id="codeSet"/>
        	<div class="form-group row m-narrow">
			    <div class="col-sm-3 col-md-3 col-xs-3" data-tag='statistic-size'>
		        	<div class="input-group">
					    <label for="statisticsSize" class="input-group-addon">统计粒度</label>
					    <lui:dropList id="statisticsSize" name="statisticsSize" className="form-control m-input" dropValues="codeSet.statisticsSize"
					    	onValueChanged="ExpenseReportPage.onStatisticsSizeChanged"/>
					</div>
			    </div>
			    <div class="col-sm-3 col-md-3 col-xs-3">
		        	<div class="input-group">
					    <label for="statisticsRange" class="input-group-addon">统计范围</label>
					    <lui:dropList id="statisticsRange" name="statisticsRange" className="form-control m-input" dropValues="codeSet.statisticsRange01"/>
					</div>
			    </div>
			    <div class="col-sm-3 col-md-3 col-xs-3" data-tag='statistic-time'>
			    	<div class="input-group">
					    <label for="startTime" class="input-group-addon">开始时间</label>
				    	<lui:datepicker name="startTime" dateType="date" id="startTime" endDate="${u:getCurrTimeChangeNthDayDate(0, 'yyyy-MM-dd HH:mm:ss') }"/>
					</div>
			    </div>
			    <div class="col-sm-3 col-md-3 col-xs-3" data-tag='statistic-time'>
			    	<div class="input-group">
					    <label for="endTime" class="input-group-addon">结束时间</label>
				    	<lui:datepicker name="endTime" dateType="date" id="endTime" endDate="${u:getCurrTimeChangeNthDayDate(0, 'yyyy-MM-dd HH:mm:ss') }"/>
					</div>
			    </div>
			</div>
			<div class="form-horizontal">
			    <div class="form-group">
			        <div class="col-md-12 col-sm-12">
			            <div class="btn-group" id="buttonGro">
			                <button type="button" class="btn btn-primary" onclick="ExpenseReportPage.findReport()"><i class='fa fa-fw fa-search'></i>查询报表</button>
			                <button type="reset" class="btn btn-default"><i class='fa fa-fw fa-repeat'></i>重置</button>
			            </div>
			        </div>
			    </div>
			</div>
			<ul class='m-fixed-tabset' id="mtabset" data-container='#mcontainer'>
			    <li data-active='true' data-target='consumeSumReport'><a>消费总和</a></li>
			    <li data-target='consumeTypeReport'><a>消费类型（消费金额）</a></li>
			    <li data-target='consumeChannelReport'><a>消费渠道（消费金额）</a></li>
			    <li data-target='consumeTypeAccordCountReport'><a>消费类型（数量）</a></li>
			    <li data-target='consumeChannelAccordCountReport'><a>消费渠道（数量）</a></li>
			</ul>
			<ul class='m-fixed-tabset-container' id="mcontainer" style="min-height: 513px;">
			    <li data-id="consumeSumReport">
			        <div id="consumeSumReport" class='m-cust' style="display:none;">
			        	<div id="consumeSumReportContainer" style="min-width:400px;height:400px"></div>
			        </div>
			    </li>
			    <li data-id="consumeTypeReport">
			        <div id="consumeTypeReport" class='m-cust' style="display:none;">
			        	<div id="consumeTypeReportContainer" style="min-width:400px;height:400px"></div>
			        </div>
			    </li>
			    <li data-id="consumeChannelReport">
			        <div id="consumeChannelReport" class='m-cust' style="display:none;">
			        	<div id="consumeChannelReportContainer" style="min-width:400px;height:400px"></div>
			        </div>
			    </li>
			    <li data-id="consumeTypeAccordCountReport">
			        <div id="consumeTypeAccordCountReport" class='m-cust' style="display:none;">
			        	<div id="consumeTypeAccordCountReportContainer" style="min-width:400px;height:400px"></div>
			        </div>
			    </li>
			    <li data-id="consumeChannelAccordCountReport">
			        <div id="consumeChannelAccordCountReport" class='m-cust' style="display:none;">
			        	<div id="consumeChannelAccordCountReportContainer" style="min-width:400px;height:400px"></div>
			        </div>
			    </li>
			</ul>
			<lui:ajax id="findConsumeReportAjax" url="${ctx }/report/json/find/01/" type="post" formQuery="#expenseReportFrm" 
				formSubmit="true" onSuccess="ExpenseReportPage.onFindJsonSucc" contentType="application/x-www-form-urlencoded"/>
        </form>
    </lui:board>
</lui:boards>
</body>
</u:View>
</html>